<template>
  <div class="card container">
    <div>
      <div style="margin-top: 40px">
        <el-steps :active="active" simple>
          <el-step title="验证旧密码" icon="el-icon-upload" />
          <el-step title="填写新密码" icon="el-icon-edit" />
        </el-steps>
        <div style="text-align: center; padding-left: 0px; margin: 20vh">
          <div v-if="Isshwo">
            <el-form
              ref="checkPass"
              :model="checkPass"
              :rules="rule"
              status-icon
              label-width="200px"
              class="demo-ruleForm"
            >
              <el-form-item label="请输入您的旧密码" prop="password">
                <el-input
                  v-model="checkPass.password"
                  :show-password="true"
                  type="password"
                  placeholder="请输入您的旧密码"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  style="float: right"
                  type="primary"
                  @click="checkPassword('checkPass')"
                  >下一步</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div v-else>
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="nrule"
              status-icon
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item label="请输入您的新密码" prop="pass">
                <el-input
                  v-model="ruleForm.pass"
                  type="password"
                  placeholder="请输入您的新密码"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="请再次输入新密码" prop="checkPass">
                <el-input
                  v-model="ruleForm.checkPass"
                  type="password"
                  placeholder="请再次输入新密码"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  style="float: right"
                  type="primary"
                  @click="updatePassword('ruleForm')"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 加密
import crypto from 'crypto'
import qs from 'qs'
import {updatePW} from '@/api/power/user.js'
export default {
  data () {
    // 检查密码的表单验证规则
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    // 确认密码的表单验证规则
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      checkPass: {}, // 检查密码的信息存储对象
      // 修改密码
      ruleForm: {
        pass: '',
        checkPass: ''
      },
      active: 1, // tab的切换参数
      Isshwo: true, // dom的切换控制
      nrule: {
        pass: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      },
      rule: {
        // 输入旧密码的表单验证
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // dom的切换
    next () {
      if (this.active++ > 2) this.active = 0
    },
    // 修改密码
    updatePassword (formName) {
      const user = this.$store.state.loginState
      // 加密
      const md5 = crypto.createHash('md5')
      md5.update(this.ruleForm.checkPass)
      let md5password = md5.digest('hex')
      user.password = md5password
      //
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.pass === this.ruleForm.checkPass) {
            updatePW(user).then(res => {
              this.$message({
                center: true,
                type: 'success',
                message: '修改成功'
              })
              this.$router.push('/person')
              // sessionStorage.setItem('loginState', JSON.stringify(res.data.data))
              const payload = res.data.data
              this.$store.commit('insertLoginState', payload)
            })
          } else {
            this.$message({
              center: true,
              type: 'warnning',
              message: '两次密码不一致,请重新填写!'
            })
          }
        } else {
          this.$message({
            center: true,
            type: 'warnning',
            message: '请按要求将信息填写完整！'
          })
        }
      })
    },
    // 检查旧密码是否正确
    checkPassword (formName) {
      // let pass = this.$store.state.loginState.password
      this.$refs[formName].validate(valid => {
        // 是否填密码
        if (valid) {
          // 旧密码是否正确
          // 接口测试
          // 加密
          const md5 = crypto.createHash('md5')
          md5.update(this.checkPass.password)
          let md5password = md5.digest('hex')
          let value = { account: this.$store.state.loginState.account, password: md5password }
          this.$axios.post('http://82.156.109.119:7001/user/login', qs.stringify(value)) // 这是一个异步方法！
            .then(res => {
              if (res.data.code === 1000) {
                this.next()
                this.Isshwo = false
              } else {
                this.$alert('输入的旧密码有误，请重新输入', '错误', {
                  confirmButtonText: '确定'
                })
              }
            })
          // 旧密码是否正确
          // if (this.checkPass.password === pass) {
          //   this.next()
          //   this.Isshwo = false
          // } else {
          //   this.$alert('输入的旧密码有误，请重新输入', '错误', {
          //     confirmButtonText: '确定'
          //   })
          // }
        } else {
          this.$message({
            center: true,
            type: 'warnning',
            message: '请按要求将信息填写完整！'
          })
        }
      })
    }
  }
}
</script>
 <style scoped>
</style>
